<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100%}
    </style>
    
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpdDM0j22ReqUynmcCXDT4c4oBgXXTnqI&sensor=false">
    </script>
    <script type="text/javascript">

var map;
var defaults;
var lastValidCenter;
var spaceOverlays;
var locRange;
var locCenter;

function initialize() {

    // Initialize variables
    defaults = {
		map: {
			bounds: new google.maps.LatLngBounds(new google.maps.LatLng(47.242751, -122.438561), new google.maps.LatLng(47.244309,-122.437373)),
			center: new google.maps.LatLng(47.243606,-122.437928),
			zoom: 19
		}
		
	};
    lastValidCenter = defaults.map.center;
    
    // Start monitoring user's location
    var watchid = navigator.geolocation.watchPosition(
			gotPosition,
			errorGettingPosition,
			{'enableHighAccuracy':true,'timeout':10000,'maximumAge':20000});
		
    // Setup map
    var mapOptions = {
		center: defaults.map.center,
		/* Uncomment to disable map interaction
		disableDefaultUI: true,
		disableDoubleClickZoom: true,
		draggable: false,
		keyboardShortcuts: false,
		scrollwheel: false,
		*/
		zoom: defaults.map.zoom,
		mapTypeId: google.maps.MapTypeId.ROADMAP
    };	
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    map.fitBounds(defaults.map.bounds);
    
    spaceOverlays = new Array();
    for (var i = 0; i < 35; i++) {
        var latOffset = 0.000023 * i;
        var longOffset = 0.000004 * i;
        spaceOverlays[i] = new google.maps.Polygon({
            map: map,
        	paths: [ new google.maps.LatLng(47.243154 + latOffset,-122.43811 + longOffset), new google.maps.LatLng(47.243151 + latOffset,-122.438044 + longOffset),
                     new google.maps.LatLng(47.243128 + latOffset,-122.438048 + longOffset), new google.maps.LatLng(47.243131 + latOffset,-122.438114 + longOffset) ],
    		fillColor: "F00",
    		fillOpacity: "0.3",
    		strokeColor: "F00",
    		strokeOpacity: "0.6",
                clickable: false
    	});
    }
    for (var i = 0; i < 35; i++) {
        var latOffset = 0.000023 * i;
        var longOffset = 0.000004 * i;
        spaceOverlays[i + 35] = new google.maps.Polygon({
            map: map,
            paths: [ new google.maps.LatLng(47.243157 + latOffset,-122.438176 + longOffset), new google.maps.LatLng(47.243154 + latOffset,-122.438110 + longOffset),
                     new google.maps.LatLng(47.243131 + latOffset,-122.438114 + longOffset), new google.maps.LatLng(47.243134 + latOffset,-122.438180 + longOffset) ],
    		fillColor: "F00",
    		fillOpacity: "0.3",
    		strokeColor: "F00",
    		strokeOpacity: "0.6",
                clickable: false
    	});
    }
    for (var i = 0; i < 10; i++) {
        var latOffset = -0.000026 * i;
        var longOffset = -0.000004 * i;
        spaceOverlays[i + 70] = new google.maps.Polygon({
            map: map,
            paths: [ new google.maps.LatLng(47.244054 + latOffset,-122.437583 + longOffset), new google.maps.LatLng(47.244021 + latOffset,-122.437518 + longOffset),
                     new google.maps.LatLng(47.243995 + latOffset,-122.437522 + longOffset), new google.maps.LatLng(47.244028 + latOffset,-122.437587 + longOffset) ],
                fillColor: "F00",
                fillOpacity: "0.3",
                strokeColor: "F00",
                strokeOpacity: "0.6",
                clickable: false
        });
    }
    
    var socket = io.connect('http://kurlly.hopto.org:8080');
    socket.on('update', function (data) {
        for (var i = 0; i < data.length; i++) {
            spaceOverlays[data[i].index].setOptions({
                fillColor: data[i].color, 
                strokeColor: data[i].color
                });
        }
    });
}

// Show users location on the map
function gotPosition(pos)
{
	var geolocate = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
	if (locRange) {
		locRange.setCenter(geolocate);
		locRange.setRadius(pos.coords.accuracy);
	} else {
		locRange = new google.maps.Circle({
			map: map,
			center: geolocate,
			clickable: false,
			fillColor: "004",
			fillOpacity: "0.3",
			strokeColor: "008",
			strokeOpacity: "0.6",
			radius: pos.coords.accuracy
		});
	}

	/* Draw marker at center of location
	if (locCenter) {
                locCenter.setCenter(geolocate);
        } else {
		locCenter = new google.maps.Circle({
                	map: map,
                	center: geolocate,
                	clickable: false,
                	fillColor: "008",
                	fillOpacity: "0.6",
                	strokeColor: "008",
                	strokeOpacity: "0.6",
                	radius: 5
        });
        }
	*/

	/* Auto centers map on user's location
	map.panTo(geolocate);
	map.setHeading(pos.coords.heading);
	*/
}

// Display an alert message if the user's location is unavailable
function errorGettingPosition(err)
{
	if(err.code==1)
	{
		alert("User denied geolocation.");
	}
	else if(err.code==2)
	{
		alert("Position unavailable.");
	}
	else if(err.code==3)
	{
		alert("Timeout expired.");
	}
	else
	{
		alert("ERROR:"+ err.message);
	}
}

    </script>
  </head>
  <body onload="initialize()">
    <div id="map-canvas"/>
  </body>
</html>
